<html>
<head>
<title>cara-membuat-automatic-featured-posts</title>
    #featured{margin:0;padding:10px 10px 0}

    .sliderwrapper{position:relative;overflow:hidden;height:270px;-webkit-box-shadow:#222 0 2px 8px;-moz-box-shadow:#222 0 2px 7px;}

    .sliderwrapper .contentdiv{visibility:hidden;position:absolute;left:0;top:0;height:100%;padding:0}

    .pagination{text-align:right;padding:15px 0 10px}

    .pagination a{font-size:11px;color:#fff;background:#5e5e5e;text-shadow:0 2px 2px rgba(0,0,0,0.3);padding:3px 6px}

    .pagination a:hover,.pagination a.selected{color:#000;background-color:#aeaeae}

    .featuredPost{width:330px;background:#191919;filter:alpha(opacity=75);-moz-opacity:.75;opacity:.75;color:#dedde5;position:absolute;bottom:0;padding:10px 10px 0}

    .featuredPost a{color:#fff}

    .featuredPost a:hover{color:#dedde5}

    .featuredPost h2{font-size:12px;line-height:1;margin:0}

    .featuredPost span{font-size:10px}

    .featuredPost p{font-size:11px}
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>
<script src='https://www.google.com/jsapi?key=ABQIAAAA2hx9d_4eShgrICEQXtat9RTVScYuS-PfTXZAugRIEupjRG9uXBQkXC_ud1s1okAN7kkWYKCL_xf9qQ' type='text/javascript'/>

<script>

//<![CDATA[


imgr = new Array();

imgr[0] = "http://2.bp.blogspot.com/-uitX7ROPtTU/Tyv-G4NA_uI/AAAAAAAAFBY/NcWLPVnYEnU/s1600/no+image.jpg";

showRandomImg = true;

aBold = true;

summaryPost = 100;

numposts1 = 6;

label1 = "http://javascrip-anakdemak.blogspot.com/search/label/RECENT%20POST";

function removeHtmlTag(strx,chop){var s=strx.split("<");for(var i=0;i<s.length;i++){if(s[i].indexOf(">")!=-1){s[i]=s[i].substring(s[i].indexOf(">")+1,s[i].length)}}s=s.join("");s=s.substring(0,chop-1);return s}

function showrecentposts1(json){j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();for(var i=0;i<numposts1;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var pcm;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break}}for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){pcm=entry.link[k].title.split("")[0];break}}

if ("content" in entry) {

var postcontent = entry.content.$t;}

else

if ("summary" in entry) {

var postcontent = entry.summary.$t;}

else var postcontent = "";

postdate = entry.published.$t;

if(j>imgr.length-1) j=0;

img[i] = imgr[j];

s = postcontent ; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);

if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;

var month=[1,2,3,4,5,6,7,8,9,10,11,12];var month2=["January","February","March","April","May","Juny","July","August","September","October","November","December"];var day=postdate.split("-")[2].substring(0,2);var m=postdate.split("-")[1];var y=postdate.split("-")[0];for(var u2=0;u2<month.length;u2++){if(parseInt(m)==month[u2]){m=month2[u2];break;

}}

var daystr = day+ ' ' + m + ' ' + y ;

var trtd = '<div class="contentdiv"><div class="sliderPostPhoto"><a href="'+posturl+'"><img width="350" height="270" class="alignnone" src="'+img[i]+'"/></a><div class="sliderPostInfo"></div></div><div class="featuredPost"><h2><a href="'+posturl+'">'+posttitle+'</a></h2><span>'+daystr+'</span><p>'+removeHtmlTag(postcontent,summaryPost)+'...</p></div></div>';

document.write(trtd);

j++;

}}

//]]>

</script> 
</head>
<body>

    <script src='http://dl.dropbox.com/u/12924430/contentslider.js'/>

    <script>

    //<![CDATA[

    featuredcontentslider.init({

    id: "slider1", //id of main slider DIV

    contentsource: ["inline", ""], //Valid values: ["inline", ""] or ["ajax", "path_to_file"]

    toc: "#increment", //Valid values: "#increment", "markup", ["label1", "label2", etc]

    nextprev: ["Previous", "Next"], //labels for "prev" and "next" links. Set to "" to hide.

    enablefade: [true, 0.5], //[true/false, fadedegree]

    autorotate: [true, 6000], //[true/false, pausetime]

    onChange: function(previndex, curindex){ //event handler fired whenever script changes slide

    //previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)

    //curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)

    }

    })

    //]]>

    </script>

    <div id='featured'>

    <div class='sliderwrapper' id='slider1'>

    <script>

    document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/&quot;+label1+&quot;?max-results=&quot;+numposts1+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts1\&quot;&gt;&lt;\/script&gt;&quot;);

    </script>

    </div>

    <div class='pagination' id='paginate-slider1'>

    </div>

</body>
</html>